import { defineConfig, presetAttributify, presetUno } from "unocss"

/**
 * 使用 `defineConfig` 定义 Unocss 的配置，主要配置预设、规则和快捷方式等。
 */
export default defineConfig({
  /**
   * 预设（presets）
   * 预设是 Unocss 提供的一系列预定义的样式规则和功能，你可以通过引入不同的预设来增强或修改框架的行为。
   */
  presets: [
    /**
     * presetAttributify：属性化模式
     * 允许在 HTML 元素的属性中直接书写样式，不需要通过类名定义样式，例如 `<div text="red"></div>`。
     * 这是一种简洁的书写方式，非常适合快速原型开发。
     */
    presetAttributify(),

    /**
     * presetUno：默认预设
     * UnoCSS 的核心预设，包含常见的实用工具类，比如 `flex`、`padding`、`margin` 等。
     * 这是最基础的预设，几乎所有项目都会引入它。
     */
    presetUno()
  ],

  /**
   * 自定义规则（rules）
   * 规则是你可以自定义的 CSS 样式规则，每条规则是一个数组，包含一个类名和对应的样式定义。
   */
  rules: [
    /**
     * 定义自定义类名 `uno-padding-20`，对应的样式为 `padding: 20px`
     * 使用方法：在元素上添加 `uno-padding-20` 类名
     * 例如：<div class="uno-padding-20"></div>
     */
    ["uno-padding-20", { padding: "20px" }]
  ],

  /**
   * 自定义快捷方式（shortcuts）
   * 快捷方式允许你将多个实用工具类组合为一个类名，从而简化代码的书写。
   */
  shortcuts: {
    /**
     * 定义 `uno-wh-full`，表示 `w-full h-full`，即宽高都为 100%。
     * 使用方法：在元素上添加 `uno-wh-full` 类名
     * 例如：<div class="uno-wh-full"></div>
     */
    "uno-wh-full": "w-full h-full",

    /**
     * 定义 `uno-flex-center`，表示 `flex justify-center items-center`，即使用 `flexbox` 布局，且子元素水平居中和垂直居中。
     * 使用方法：在元素上添加 `uno-flex-center` 类名
     * 例如：<div class="uno-flex-center"></div>
     */
    "uno-flex-center": "flex justify-center items-center",

    /**
     * 定义 `uno-flex-x-center`，表示 `flex justify-center`，即使用 `flexbox` 布局，且子元素水平居中。
     * 使用方法：在元素上添加 `uno-flex-x-center` 类名
     * 例如：<div class="uno-flex-x-center"></div>
     */
    "uno-flex-x-center": "flex justify-center",

    /**
     * 定义 `uno-flex-y-center`，表示 `flex items-center`，即使用 `flexbox` 布局，且子元素垂直居中。
     * 使用方法：在元素上添加 `uno-flex-y-center` 类名
     * 例如：<div class="uno-flex-y-center"></div>
     */
    "uno-flex-y-center": "flex items-center"
  }
})
